
<script setup>
import addForm from "./addForm.vue";
import { useApartmentList } from "@/hooks/index";
import { getExpenseList, delExpenseList } from "@/api/expense.js";
import { onMounted, reactive, ref } from "vue";
import { formatDateArray } from "../../../utils/changeArr";
import { ElMessage } from "element-plus";
// ==================================
const ApartmentList = useApartmentList();
// console.log(ApartmentList);

// 新增
const addRef = ref();

// ================================
// 列表功能
const formData = reactive({
  current: 1,
  pageSize: 10,
  create_time: "",
  community_code: "",
});

// 定义总数
const total = ref(0);
// 定义列表数据
const list = ref([]);
// 定义方法
const initData = async () => {
  const res = await getExpenseList(formData);
  // 赋值
  list.value = formatDateArray(res.data.rows);
  total.value = res.data.count;
  // console.log(res);
};

// 每页数量切换事件
const sizeChange = (val) => {
  formData.pageSize = val;
  initData();
};

// 每页页码切换事件
const currentChange = (val) => {
  formData.current = val;
  initData();
};

// 表单搜索事件
const onSubmit = () => {
  formData.current = 1;
  initData();
};

// 表单充值事件
const onReset = () => {
  Object.assign(formData, {
    current: 1,
    pageSize: 10,
    create_time: "",
    community_code: "",
  });
  initData();
};

// =============================
// 删除功能
const delRow = async (id) => {
  await delExpenseList(id);
  ElMessage.success("删除成功");
  if (formData.current > 1 && list.value.length === 1) formData.current--;
  initData();
};

// 挂载，调用
onMounted(() => {
  initData();
});

// <!-- 修改功能 -->
const editRow = (id) => {
  addRef.value.replayData(id);
};
</script>

<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">收费项目管理</b> 用于展示收费项目列表信息，以及增加、修改、删除等操作</p>
    <el-card>
      <!-- 搜索框区域 -->
      <el-form label-width="80px" :inline="true" size="normal">
        <el-form-item label="小区名称">
          <el-select placeholder="请输入" v-model="formData.community_code">
            <el-option v-for="item in ApartmentList" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input placeholder="请输入" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker type="datetimerange" start-placeholder="请选择" end-placeholder="请选择"
              :default-time="defaultTime1" style="width: 200px" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 15px;">
      <!-- 新增按钮区域 -->
      <el-row>
        <el-button type="primary" @click="addRef.isShow = true">新增项目</el-button>
      </el-row>
      <br />
      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%" border="1px solid">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column label="小区名称" width="180">
          <template #default="{ row }">
            {{ row.community == null ? "未知" : row.community.name }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="收费项目编程" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="success">编辑</el-button>
            <el-popconfirm title="确认删除吗?" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table><br>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="formData.current"
        v-model:page-size="formData.pageSize" layout="total, prev, pager, next"
        :total="total" background>
      </el-pagination>
      <!-- 新增表单区域 -->
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
  </div>
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<style scoped></style>
